package main

func main() {
	/*
		css：页面美化 和 布局控制
		1.概念：Cascading Style Sheets 层叠样式表
			*层叠：多个样式可以作用在同一个 html 的元素上，同时生效

		2.好处：
			1.功能强大
			2.将 内容展示 和 样式控制 分离
				*降低耦合度。解耦
				*让分工协作更容易
				*提高开发效率

		3.CSS 的使用：CSS 与 html 结合方式
			1.内联样式
				*在标签内使用 style 属性指定 CSS 代码
				*如：<div style="color: #98e7e7">hello css</div>
			2.内部样式
				*在 head 标签内，定义 style 标签，style 标签的标签体内容就是 CSS 代码
				*如：
					<style>
					  div{
						color: dodgerblue;
					  }
					</style>
					<div>hello css</div>
			3.外部样式
				1.定义 CSS 资源文件
				2.在 head 标签内，定义 link 标签，引入外部的资源文件
				*如：
					*a.css文件：
						div{
							color: aqua;
						}
					<link rel="stylesheet" href="a.css">
					<div>hello css</div>

			*注意：
				* 1,2,3种方式 css 的作用范围越来越大
				* 1方式不常用，后期常用2,3
				* 第 3 种方式还可以写为：
					<style>
						@import "a.css";
					</style>

		4.css 语法：
			*格式：
				选择器 {
					属性名1:属性值1;
					属性名2:属性值2;
					...
				}
			*选择器：筛选具有相似特征的元素
			*注意：
				*每一对属性需要使用 ; 隔开，最后一对属性可以不加 ;

		5.选择器：筛选具有相似特征的元素
			*分类：
				1.基础选择器
					1. id选择器，选择具体的 id 属性值的元素，建议在一个 html 页面中 id 值唯一
						* 语法：#id属性值{}
					2. 元素选择器：选择具有相同标签名称的元素
						*语法：标签名称{}
						*注意：id选择器 的优先级 高于 元素选择器
					3. 类选择器：选择具有相同的class属性值的元素
						*语法：.class属性值{}
						*注意：类选择器 的优先级 高于 元素选择器

					*优先级：id选择器 > 类选择器 > 元素选择器

				2.扩展选择器
					1.选择所有元素：
						*语法：*{}
					2.并集选择器：
						*语法：选择器1,选择器2{}
					3.子选择器：筛选选择器1元素下的选择器2元素
						*语法：选择器1 选择器2{}
					4.父选择器：筛选选择器2的父元素选择器1
						*语法：选择器1 > 选择器2{}
					5.属性选择器：选择元素名称，属性名=属性值的元素
						*语法：元素名称[属性名="属性值"]{}
					6.伪类选择器：选择一些元素具有的状态
						*语法：元素:状态{}
						*如：<a>
							*状态：
								* link：初始化的状态
								* visited：被访问过的状态
								* active：正在访问的状态
								* hover：鼠标悬浮的状态

		6.属性：
			1.字体、文本
				* font-size:字体大小
				* color：文本颜色
				* text-align：对齐方式
				* line-height：行高
			2.背景
				* background：复合属性
			3.边框
				* border：设置边框，复合属性
			4.尺寸
				* width：宽度
				* height：高度
			5.盒子模型：控制布局
				* margin：外边距（auto：让方框水平居中）
				* padding：内边距
					* 默认情况下内边距会影响整个盒子的大小
					* box-sizing: border-box;    设置盒子的属性，让 width 和 height 就是盒子最终的大小
				* float：浮动
					* left：左浮动
					* right：右浮动
	*/
}
